@charset "utf-8";
@import "common/reset";
@import "common/common";
body{
//  overflow: hidden;
}
.writing_web{
    position: relative;
//  margin: 0 auto;
    width: 640px;
    overflow: hidden;
    height: 100%;
    background: url(../images/guang_bg.jpg) no-repeat left top/100% 100%;
    //主要书写区域
    .main_text{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }
    //用户得分显示
    .userScore{
    	display: none;
        position: absolute;
        bottom:19%;
        width: 80%;
        left: 10%;
        .showScore{
            position: relative;
            z-index: 2;
            display: inline-block;
            vertical-align: middle;
            width: 143px;
            height: 143px;
            text-align: center;
            line-height: 130px;
            font-size: 65px;
            color: #e30920;
            background: url(../images/userScore_circle.png) no-repeat center/100% 100%;
        }
        .showText{
            overflow: hidden;
            box-sizing: border-box;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            height: 78px;
            font-size: 20px;
            line-height: 26px;
            padding: 13px 30px 10px;
            width: 340px;
            background: url(../images/userScore_squre.png) no-repeat center/100% 100%;
            margin-left: -30px;
            
        }
        
    }
    //三个按钮
    .btns{
        position: absolute;
        width: 100%;
        bottom: 10%;
        left: 0;
        text-align: center;
        //写字前按钮
        .btn{
            position: relative;
            display: inline-block;
            width:156px;
            height: 75px;
            line-height: 70px;
            background: url(../images/writing_btn_bg.png) no-repeat left top/100% 100%;
            &:nth-child(2){  
                margin: 0 34px; 
            }
            img{
                vertical-align: middle;
            }
            //烟花效果
            .yanhua{
                width: 100%;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%) ;
                transform-origin: center;
                display: none;
            }
        }
        //出成绩后底部按钮
        //在原来btn的基础上添加afterWri_btn样式
        .beforeWri{
//          display: none;
        }
        .afterWri{
            margin-bottom: -75px;
            display: none;
            .ticket{
                margin-left: 50px;
                width: 225px;
                text-align: center;
                p{
                    	padding: 5px 10px;
                		text-align: center;
                    font-size: 22px;
                    height: 36px;
                    line-height: 36px;
                    background: rgba(251,228,164,.8);
                    border-radius: 10px;
                };
               
//              height: 150px;
                
                
            }
            
        }
        .afterWri_btn{
            width:250px;
            .yanhua{
                width:176px;
            }
        }
    }
    //正式书写前的遮罩
    .mask{
        overflow: hidden;
        position: absolute;
        z-index: 8;
        width: 640px;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,.5);
        .pointer{
            position: relative;
            top:270px;
            left: 360px;
            .pointer_circle{
                position: absolute;
                top: -40px;
                left: 10px;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background: rgba(255,255,255,.5);
    //          margin-left: 10px;
    //          margin-bottom: 40px;
            }
            img{
                display: block;
                &:last-child{
                    margin-top: 20px;
                    transform: translateX(-20%);
                }
            }
           
        }
        //计算分数时显示
        .waiting{
            display: none;
            text-align: center;
            color: #FFFFFF;
            font-size: 35px;
            margin-top:320px;
//          span{
//              margin-top:20px;
//              font-size: 95px;
//          }
            .waiting_hua{
                margin:0 auto;
                margin-top: 30px;
                width:30%;
                text-align: center;
                animation: xuanzhuan 2s linear infinite;
                img{
                    width: 100%;
                }
                
            }
        }
        //分享提示
        .share{
	        	width: 100%;
	        	display: none;
            img{
            		position: absolute;
            		top: 0;
            		right: 0;
            }
        }
    
    }
}

//等待图标花的旋转
@keyframes xuanzhuan{
    0{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}




